@use "../variables";

.social-list {
  display: flex;
  flex-wrap: wrap;
  max-width: 215px;
  padding-left: 15px;
  column-gap: 25px;

  @media (max-width: variables.$vp-max-tablet) {
    max-width: unset;
    padding-top: 10px;
    padding-left: 0;
  }
}

.social-list__link {
  &:hover,
  &:focus-visible {
    background-color: variables.$color-pearl-fade;
    opacity: 0.8;
  }

  &:active {
    background-color: variables.$color-pearl-fade;
    opacity: 0.6;
  }
}
